var menuData = [
    {
        name: "主页",
        link: '/home'
    },
    {
        name: "产品中心",
        link: "/product",
        submenu: [
            {
                name: "电脑",
                link: '/computer'
            },
            {
                name: "手机",
                link: '/phone'
            },
            {
                name: "家电",
                link: '/jiadian'
            }
        ]
    },
    {
        name: "关于我们",
        link: '/about'
    },
    {
        name: "联系我们",
        link: '/contact',
        submenu: [
            {
                name: "电话",
                link: '/contact/p'
            },
            {
                name: "邮箱",
                link: '/contact/e'
            },
            {
                name: "微信",
                link: '/contact/we'
            },
        ]
    }
];

var menu = document.querySelector('.menu')
var html = '';
//遍历数组中的每一个项目
for (var item of menuData) {
    //声明一个存放二级菜单的空字符串
    subHtml = ''
    //如果数据里面包含submenu也就是有二级菜单
    if (item.submenu) {
        //遍历二级菜单所有子项目，然后把生成的hmtl全部拼接
        for (subItem of item.submenu) {
            //根据子项目数据生成二级菜单
            var subMenuHtml = `
            <li class="item">
                <a href="${subItem.link}">${subItem.name}</a>
            </li>`
            //把生成的单个二级菜单数据拼接到subHtml
            subHtml += subMenuHtml

        }
        //用ul.submenu包裹所有生成的二级菜单li  
        subHtml = '<ul class="submenu">' + subHtml + '</ul>'
        // console.log(subHtml)       
    }
    //菜单模板
    var menuHtml = `
        <li class="item">
            <a href="${item.link}">${item.name}</a>
            ${subHtml}
        </li>`

    html += menuHtml
}
menu.innerHTML = html